<template>
  <div class="my-padding">

    <div class="my-padding">
      <el-form :inline="true">
        <el-form-item label="模板上传:">
          <el-upload
            class="upload-demo"
            ref="upload"
            accept=".doc,.docx"
            :on-change="handleChange"
            :action="uploadUrl"
            :limit="1"
            :show-file-list="true"
            :auto-upload="false"
          >
            <el-button type="primary" slot="trigger">选取文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">上传</el-button>
        </el-form-item>
      </el-form>
      <el-table
        element-loading-text="Loading"
        :data="list"
        border
        fit
        style="width: 100%"
        highlight-current-row>
<!--        <el-table-column label="类型" align="center">-->
<!--          <template slot-scope="scope">{{ scope.row.types }}</template>-->
<!--        </el-table-column>-->
        <el-table-column label="模板名(以第一次文件名命名)" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleUpload(scope.row.uploadId)">下载</el-button>
            <el-button type="primary" size="small" @click="handleUpdate(scope.row.uploadId)">更新</el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.row.uploadId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="更新"
        :visible.sync="dialogTableVisible"
        center
        :append-to-body="true"
        :lock-scroll="false"
        width="40%"
      >

        <div style="padding-bottom: 1rem">
          <el-upload
            class="upload-demo"
            ref="upload"
            accept=".doc,.docx"
            :on-change="updateChange"
            :action="uploadUrl"
            :limit="1"
            :show-file-list="true"
            :auto-upload="false"
          >
            <el-button type="primary" slot="trigger">选取文件</el-button>
          </el-upload>
        </div>
        <el-button type="primary" @click="updateSubmit">提交</el-button>

      </el-dialog>

    </div>
  </div>
</template>
<script>
  import $ from "@/api/sitpos"

  export default {
    name: 'Upload',
    data() {
      return {
        dialogTableVisible: false,
        activeName: "1",
        uploadId: '',
        isTrans: "",
        paths: "",
        claimsNumber: 'ZQ202009050010',
        types: '',
        name: '',
        createTime: '',
        createId: '',
        trueName: '',
        list: [],
        listLoading: true,
        form: {
          uploadId: '',
          paths: "",
          claimsNumber: '',
          types: '',
          name: '',
          createTime: '',
          createId: '',
          trueName: ''
        },
        uploadList: [],
        value: '',
        uploadUrl: '',
        uploadfile: "",
        updatefile: "",
      };
    },
    beforeRouteEnter(to, from, next) {
      // console.log(from)
      from.meta.claimsNumber = from.query.claimsNumber
      from.meta.borrower = from.query.borrower
      next()
    },
    created() {

      this.fetchData();

      if (this.$route.query.activeName == null) {
        this.activeName = "first";
      } else {
        this.activeName = this.$route.query.activeName;
      }
      $.addInit().then(res => {
        if (res.success) {
          this.uploadList = res.data.uploadList;
        }
      });

    },
    methods: {
      handleUpdate(id) {
        this.dialogTableVisible = true
        this.uploadId = id
      },
      fetchData() {
        $.uploadAll({claimsNumber: 'ZQ202009050010'}).then(response => {
          this.list = response.data;
          for (var i = 1; i <= this.list.length; i++) {
            this.$set(this.list[i - 1], "a", i);
          }
          // console.log(this.list)
        });
      },
      handleSubmit() {

        if (this.uploadfile == "") {
          this.$message({
            message: "请先选择文件",
            type: 'error'
          })
          return
        }
        this.listLoading = true;
        this.list = null;
        let formData = new FormData()
        formData.append('file', this.uploadfile.raw);
        formData.append("cliamsNamber", 'ZQ202009050010');
        formData.append("types", this.form.types)
        formData.append("name", this.name)
        $.busUpload(formData).then(res => {
          if (res.success) {
            this.form.types = ""
            this.name = ""
            this.$refs.upload.clearFiles()
            this.fetchData();
            this.$message({
              message: "上传成功",
              type: 'success'
            })
          }
        })
      },
      handleChange(file) {
        this.uploadfile = file
      },
      updateChange(file) {
        this.updatefile = file
      },
      updateSubmit() {
        if (this.updatefile == "") {
          this.$message({
            message: "请先选择文件",
            type: 'error'
          })
          return
        }
        this.listLoading = true;
        this.list = null;
        let formData = new FormData()
        formData.append('file', this.updatefile.raw);
        formData.append("uploadId", this.uploadId);
        $.uploadUpdate(formData).then(res => {
          if (res.success) {
            this.form.types = ""
            this.name = ""
            this.$refs.upload.clearFiles()
            this.fetchData();
            this.$message({
              message: "上传成功",
              type: 'success'
            })
            this.dialogTableVisible = false
          }
        })
      },
      handleUpload(id) {
        $.busDownload({uploadId: id}).then(response => {
          let blob = new Blob([response.data], {
            type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=gbk"
          });
          let fileName = decodeURI(
            response.headers["content-disposition"].split("=")[1]
          );
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
          } else {
            var link = document.createElement("a");
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
            //释放内存
            window.URL.revokeObjectURL(link.href);
          }
        })
      },

      handleDel(id) {
        this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            $.uploadDelete({uploadId: id}).then(response => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.fetchData();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    }
  }
</script>
<style scoped>
  .upload-demo {
    display: flex;
  }

</style>
